<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/static/productindex/css/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="/static/productindex/css/GL.css">
    <script src="/static/productindex/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>

    <script src="/static/productindex/js/swiper-3.4.2.jquery.min.js" type="text/javascript" charset="utf-8"></script>

    <script src="/static/productindex/js/swiper-3.4.2.min.js"></script>

</head>

<body>
<header>
    <!--头部-->
    <div class="header_head">
        <div class="header_head_box">
            <a href="http://meimeistore.com" class="img"><img src="/static/productindex/img/logo.jpg"/></a>
            <b class="header_head_p">
                <a href="#">
                    <img src="/static/productindex/img/img_05.png" style="border-radius: 50%;"/>
                    <!--<span class="glyphicon glyphicon-map-marker"></span>-->
                    北京</a>
                <div class="header_head_p_cs">
                    <a href="#" style="background: #C81623;color: #fff;">北京</a>
                    <a href="#">上海</a>
                    <a href="#">天津</a>
                    <a href="#">重庆</a>
                    <a href="#">河北</a>
                    <a href="#">山西</a>
                    <a href="#">河南</a>
                    <a href="#">辽宁</a>
                    <a href="#">吉林</a>
                    <a href="#">黑龙江</a>
                    <a href="#">内蒙古</a>
                    <a href="#">江苏</a>
                    <a href="#">山东</a>
                    <a href="#">安徽</a>
                    <a href="#">浙江</a>
                    <a href="#">福建</a>
                    <a href="#">湖北</a>
                    <a href="#">湖南</a>
                    <a href="#">广东</a>
                    <a href="#">广西</a>
                    <a href="#">江西</a>
                    <a href="#">四川</a>
                    <a href="#">海南</a>
                    <a href="#">贵州</a>
                    <a href="#">云南</a>
                    <a href="#">西藏</a>
                    <a href="#">陕西</a>
                    <a href="#">甘肃</a>
                    <a href="#">青海</a>
                    <a href="#">宁夏</a>
                    <a href="#">新疆</a>
                    <a href="#">港澳</a>
                    <a href="#">台湾</a>
                    <a href="#">钓鱼岛</a>
                    <a href="#">海外</a>
                </div>
            </b>
            <ul>
                <li>
                    <a href="http://auth.meimeistore.com/login.html" th:if="${session.loginUser==null}">你好，请登录</a>
                    <a th:if="${session.loginUser!=null}">你好
                        [[${session.loginUser==null?'':session.loginUser.username}]]</a>
                </li>
                <li>
                    <a href="http://auth.meimeistore.com/register.html" class="li_2" th:if="${session.loginUser==null}">免费注册</a>
                </li>
                <span>|</span>
                <li>
                    <a href="http://order.meimeistore.com/orderlist.html">我的订单</a>
                </li>
            </ul>
        </div>
    </div>
    <!--搜索导航-->
    <div class="header_sous">
        <div class="header_form">
            <input id="searchText" type="text" placeholder=""/>
            <span style="background: url('/static/productindex/img/img_12.png') 0 -1px;"></span>
            <!--<button><i class="glyphicon"></i></button>-->
            <a href="javascript:search()"><img src="/static/productindex/img/img_09.png"/></a>
        </div>
        <div class="header_ico">
            <div class="header_gw">
                <img src="/static/productindex/img/img_15.png"/>
                <span><a href="http://cart.meimeistore.com/cartList.html">我的购物车</a></span>
                <span>0</span>
            </div>
            <div class="header_ko">
                <p>购物车中还没有商品，赶紧选购吧！</p>
            </div>
        </div>
        <div class="header_form_nav">
            <ul>
                <li>
                    <a href="#" class="aaaaa">热门搜索(unfinished)</a>
                </li>
                <li>
                    <a href="#">热门搜索(unfinished)</a>
                </li>
            </ul>
        </div>
        <nav>
            <ul>
                <li>
                    <a href="#">快捷跳转(unfinished)</a>
                </li>
            </ul>
            <div class="spacer">|</div>
            <ul>
                <li>
                    <a href="#">快捷跳转(unfinished)</a>
                </li>
            </ul>
        </nav>
    </div>
</header>

<div class="section_second">
    <!-- 第一层 -->
    <div class="section_second_header">
        <p class="section_second_header_img"></p>
        <div class="section_second_header_left">
            <p></p>
            <span class="">秒杀</span>
        </div>
        <div class="section_second_header_right">
            <span id="section_second_header_right_CNS"
                  style="color: cornsilk; margin-top: 12px; font-size: 22px; font-weight: bold">未来3天内暂无秒杀活动</span>
            <span class="section_second_header_right_hours">000</span>
            <span class="section_second_header_right_mao">：</span>
            <span class="section_second_header_right_minutes">00</span>
            <span class="section_second_header_right_mao">：</span>
            <span class="section_second_header_right_second">00</span>
            <span id="section_second_header_right_CNE"
                  style="color: cornsilk; margin-top: 12px; font-size: 22px; font-weight: bold"> </span>
        </div>
    </div>
    <div class="section_second_list">
        <div class="swiper-container swiper_section_second_list_left">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <ul id="secKillContent">
                    </ul>
                </div>
            </div>
            <div class="swiper-button-prev second_list">
                <p></p>
            </div>
            <div class="swiper-button-next second_list">
                <p></p>
            </div>
        </div>
        <ul class="section_second_list_right">
            <li>
                <img src="/static/productindex/img/section_second_list_right_img.jpg" alt="">
            </li>
            <li>
                <img src="/static/productindex/img/section_second_list_right_img.png" alt="">
            </li>
            <div class="section_second_list_right_button">
                <p class="section_second_list_right_button_active"></p>
                <p></p>
            </div>
        </ul>
    </div>
</div>
<ul id="other_secKill">
    <li th:each="futureSecKillSession:${futureSecKillSessionList}">
        <div class="section_second">
            <!-- 第一层 -->
            <div class="section_second_header">
                <p class="section_second_header_img"></p>
                <div class="section_second_header_left">
                    <p></p>
                    <span class="">秒杀</span>
                </div>
                <div class="section_second_header_right">
                    <span style="color: cornsilk; margin-top: 12px; margin-right: 25px; font-size: 22px; font-weight: bold">该秒杀活动开始于: </span>
                    <span style="color: cornsilk; margin-top: 17px; font-size: 22px; font-weight: bold;"
                          th:text="${#dates.format(futureSecKillSession[0].getStartTime(),'yyyy-MM-dd HH:mm:ss')}"></span>
                </div>
            </div>
            <div class="section_second_list">
                <div class="swiper-container swiper_section_second_list_left">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <ul>
                                <li th:each="secKillSession:${futureSecKillSession}"
                                    th:onclick="to_href([[${secKillSession.secKillSkuInfoTo.skuId}]])">
                                    <img style="width: 130px; height: 130px"
                                         th:src="${secKillSession.secKillSkuInfoTo.skuDefaultImg}">
                                    <p th:text="${secKillSession.secKillSkuInfoTo.skuTitle}"></p>
                                    <span th:text="${secKillSession.secKillProductTo.seckillPrice}"></span>
                                    <s th:text="${secKillSession.secKillSkuInfoTo.price}"></s>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="swiper-button-prev second_list">
                        <p></p>
                    </div>
                    <div class="swiper-button-next second_list">
                        <p></p>
                    </div>
                </div>
                <ul class="section_second_list_right">
                    <li>
                        <img src="/static/productindex/img/section_second_list_right_img.jpg" alt="">
                    </li>
                    <li>
                        <img src="/static/productindex/img/section_second_list_right_img.png" alt="">
                    </li>
                    <div class="section_second_list_right_button">
                        <p class="section_second_list_right_button_active"></p>
                        <p></p>
                    </div>
                </ul>
            </div>
        </div>
    </li>
</ul>


</body>


<script type="text/javascript">
    function search() {
        var keyword = $("#searchText").val()
        window.location.href = "http://search.meimeistore.com/list&search.html?keyword=" + keyword;
    }

    // 点击秒杀商品进行跳转。因为秒杀商品是动态创建的，直接在动态创建的组件上添加超链接比较麻烦。所以使用方法调用辅助
    function to_href(skuId) {
        location.href = "http://item.meimeistore.com/" + skuId + ".html"
    }

    var splitTime = 0;

    <!--发送请求获取当前秒杀场次信息-->
    $.ajax({
        url: "http://seckill.meimeistore.com/getfutureseckillsession",
        async: false,
        xhrFields: {
            withCredentials: true
        },
        crossDomain: true,
        success: function (data) {
            var num = 0;
            if (data.length > 0) {
                var firstSecKill = data[0];
                if (firstSecKill.length > 0) {
                    firstSecKill.forEach(function (item) {
                        // 这里应该是每五个商品占一页。
                        // 为最下面写的.appendTo("#id名")对应的组件中添加一个<li></li>组件
                        // 在这个<li></li>中隔行填写以下四行内容
                        $("<li onclick='to_href(" + item.secKillSkuInfoTo.skuId + ")'></li>")
                            .append($("<img style='width: 130px; height: 130px' src='" + item.secKillSkuInfoTo.skuDefaultImg + "'/>"))
                            .append($("<p>" + item.secKillSkuInfoTo.skuTitle + "</p>"))
                            .append($("<span>" + item.secKillProductTo.seckillPrice + "</span>"))
                            .append($("<s>" + item.secKillSkuInfoTo.price + "</s>"))
                            .appendTo("#secKillContent");
                    })

                    var curTime = new Date().getTime();

                    if (firstSecKill[0].startTime > curTime) {
                        document.getElementById("section_second_header_right_CNS").innerHTML = "下一场次";
                        splitTime = firstSecKill[0].startTime - curTime;
                        document.getElementById("section_second_header_right_CNE").innerHTML = "后开始";
                    } else {
                        document.getElementById("section_second_header_right_CNS").innerHTML = "当前场次";
                        splitTime = firstSecKill[0].endTime - curTime;
                        document.getElementById("section_second_header_right_CNE").innerHTML = "后结束";
                    }
                }
            }
            if (data.length > 1) {
                data.forEach(function (secKill) {
                    if (num !== 0 && secKill.length > 0) {
                        secKill.forEach(function (item) {
                        })
                    }
                    num = num + 1;
                })
            }
        }
    });

    $(window).scroll(function (event) {
        var hi = $(document).scrollTop();
        console.log(hi)
    })
    var myswiper = new Swiper(".swiper_section_second_list_left", {
        prevButton: '.swiper-button-prev',
        nextButton: '.swiper-button-next',
        loop: true
    })
    var myswiper2 = new Swiper(".swiper_section_find_center_list", {
        prevButton: '.swiper-button-prev',
        nextButton: '.swiper-button-next',
        loop: true,
        autoplay: 3000,
        pagination: ".swiper-pagination",
        effect: 'fade'
    })
    var myswiper3 = new Swiper(".swiper_section_ling_right_list", {
        prevButton: '.swiper-button-prev',
        nextButton: '.swiper-button-next',
        loop: true,
        autoplay: 3000,
        pagination: ".swiper-pagination",
        effect: 'fade'

    })
    // 倒计时
    setTimeout(function () {
        if (splitTime !== 0) {
            var cha = splitTime;

            function time() {
                cha = cha - 1000;
                var hours = parseInt(cha / 1000 / 3600);
                var minutes = parseInt(cha / 1000 / 60) % 60;
                var seconds = parseInt(cha / 1000) % 60;
                if (minutes < 10) {
                    minutes = "0" + minutes
                }
                if (seconds < 10) {
                    seconds = "0" + seconds
                }
                $(".section_second_header_right_hours").html(hours);
                $(".section_second_header_right_minutes").html(minutes);
                $(".section_second_header_right_second").html(seconds);
            }

            setInterval(time, 1000)
        }
    }, 1)
    //秒杀图片上移 文字变红
    $(".swiper_section_second_list_left li p").mouseover(function () {
        $(this).css("color", "#F90013");

        $(this).prev().stop().animate({
            marginTop: "0px",
            marginBottom: "8px",

        }, 500)
    }).mouseout(function () {
        $(this).css("color", "#999")
        $(this).prev().stop().animate({
            marginTop: "8px",
            marginBottom: "0px",

        }, 500)
    })
    $(".swiper_section_second_list_left li img").mouseover(function () {
        $(this).next().css("color", "#F90013");

        $(this).stop().animate({
            marginTop: "0px",
            marginBottom: "8px",

        }, 500)
    }).mouseout(function () {
        $(this).next().css("color", "#999")
        $(this).stop().animate({
            marginTop: "8px",
            marginBottom: "0px",

        }, 500)
    })
    //秒杀左侧轮播按钮
    $(".swiper_section_second_list_left").mouseover(function () {
        $(".second_list").css("display", "block")
    }).mouseout(function () {
        $(".second_list").css("display", "none")
    })
    //发现center轮播按钮
    $(".swiper_section_find_center_list").mouseover(function () {
        $(".center_list").css("display", "block")
        console.log("aaa")
    }).mouseout(function () {
        $(".center_list").css("display", "none")
        console.log("bbb")

    })
    //觅me轮播按钮

    $(".swiper_section_ling_right_list").mouseover(function () {
        $(".right_list1").css("display", "block")
        $(".right_list2").css("display", "block")
        console.log("aaa")
    }).mouseout(function () {
        $(".right_list1").css("display", "none")
        $(".right_list2").css("display", "none")
        console.log("bbb")

    })
    //秒杀右侧图片小轮播
    $(".section_second_list_right_button p").mouseover(function () {
        $(".section_second_list_right_button p").removeClass('section_second_list_right_button_active')
        $(this).addClass("section_second_list_right_button_active")
        console.log($(this).index());
        var other = $(this).siblings().index()
        $(".section_second_list_right li").eq(other).animate({
            opacity: 0
        }, 1)
        $(".section_second_list_right li").eq($(this).index()).animate({
            opacity: 1
        }, 200)
    })
    //寻找图片左移
    $(".section_find_left_list ul li").mouseover(function () {
        $(this).children('img').stop().animate({
            right: "20px"

        }, 300)
    }).mouseout(function () {
        $(this).children('img').stop().animate({
            right: "10px"
        }, 300)
    })
    //领券中心图片右移
    $(".section_ling_left_list ul li").mouseover(function () {
        $(this).children('img').stop().animate({
            left: "55px"
        }, 400)

    }).mouseout(function () {
        $(this).children('img').stop().animate({
            left: "40px"
        }, 400)
    })
    //排行榜选项卡
    $(".section_find_right_list_ul li").mouseover(function () {
        var a = ($(this).index() - 1) * 78 + 10

        $(".section_find_right_list_ul li").children('ol').removeClass("active")
        $(this).children('ol').addClass("active")
        $(".xiahua").stop().animate({
            left: a + "px"
        }, 300)
    })
</script>

<script type="text/javascript" src="/static/productindex/js/text.js"></script>
<script type="text/javascript" src="/static/productindex/js/header.js"></script>
<!--<script type="text/javascript" src="/static/productindex/js/secend.js"></script>-->
<script type="text/javascript" src="/static/productindex/js/zz.js"></script>
<script type="text/javascript" src="/static/productindex/js/index.js"></script>
<script type="text/javascript" src="/static/productindex/js/left,top.js"></script>
<script type="text/javascript" src="/static/productindex/js/catalogLoader.js"></script>
</html>
